<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>产品列表</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/product-list.css">
    <script type="text/javascript" src="js/jquery-1.11.0.js"></script>
    <script type="text/javascript" src="js/pro-list.js" ></script>
    <script type="text/javascript" src="js/style.js" ></script>
    <script type="text/javascript" src="js/shopHis.js" ></script>
</head>
<body>
	<!--顶部-->
		<div class="hearder">
    <div class="top">
        <div class="w12">
            <div class="top-left">
                <span>亲，欢迎来到沐鱼！</span>
                【<a href="login.html" class="active">会员登录</a>】
                【<a href="reg.html">免费注册</a>】
            </div>
            <div class="top-right">
                <a href="user.html">
                    <img src="img/index-top.png">
                    <span>个人中心</span>
                </a>
                <a href="#">
                    <img src="img/index-top2.png">
                    <span>问题帮助</span>
                </a>
                <span>全国热线：400-123123</span>
            </div>
        </div>
    </div>
    <div class="middle">
        <div class="w12">
            <div class="logo">
                <a href="index.html"><img src="img/logo.png"></a>
            </div>
            <div class="middle-right">
                <div class="search">
                    <form>
                        <input type="text" name="deta" id="search" value="">
                          <ul class="search-list">
                        	<li><a href=""><span>男士面膜</span><span>约556个商品</span></a></li>
                        	<li><a href=""><span>奥克斯</span><span>约366个商品</span></a></li>
                        	<li><a href=""><span>安踏</span><span>约776个商品</span></a></li>
                        	<li><a href=""><span>冰箱</span><span>约1012个商品</span></a></li>
                        	<li><a href=""><span>杯子</span><span>约999个商品</span></a></li>
                        	<li><a href=""><span>手机</span><span>约1600个商品</span></a></li>
                        	<li><a href=""><span>路由器</span><span>约653个商品</span></a></li>
                        </ul>
                        <input type="submit" name="submit">
                    </form>
                    <ul>
                        <li>热门搜索：</li>
                        <li><a href="#" class="active">女生挎包</a></li>
                        <li><a href="#">男士背包</a></li>
                        <li><a href="#">女生背包</a></li>
                        <li><a href="#">男士双肩背包</a></li>
                        <li><a href="#">男士登山包</a></li>
                    </ul>
                </div>
                <div class="cart">
                    <a href="shop_cart.html">
                        <img src="img/top-gouwu.png">
                        <i>0</i>
                        <span>购物车</span>
                    </a>
                     <ul class="cart-lister">
                    	<li><a href=""><img src="img/top-gouwu.png"/><span>购物车是空的，快去购买商品吧！</span></a></li>
                    </ul>
                    <ul class="cart-list-two">
                    	<li>
                    		<a href="">
                    			<img src="img/main_138.png">
                    		</a>
                    		<a href=""><h6>沐鱼美包包</h6></a>
                    		<a href="" class="topCat-price">
                    			&yen;83
                    		</a>
                    	</li>
                    </ul>
                </div>
                
            </div>
        </div>
    </div>
    <div class="nav">
        <div class="w12">
            <div class="left">
                <a href="javascript:void(0);">
                    <img src="img/nav.png">
                    商品分类
                </a>
                <ul class="list">
                    <li>
                        <h2>女包</h2>
                        <ul>
                            <li><a href="#">单肩包</a></li>
                            <li><a href="#">斜挎包</a></li>
                            <li><a href="#">双肩背包</a></li>
                            <li><a href="#">手提包</a></li>
                            <li><a href="#">手拿包</a></li>
                            <li><a href="#">钱包</a></li>
                            <li><a href="#">卡包</a></li>
                            <li><a href="#">钥匙包</a></li>
                        </ul>
                    </li>
                    <li>
                        <h2>男包</h2>
                        <ul>
                            <li><a href="#">单肩包</a></li>
                            <li><a href="#">斜挎包</a></li>
                            <li><a href="#">双肩背包</a></li>
                            <li><a href="#">手提包</a></li>
                            <li><a href="#">手拿包</a></li>
                            <li><a href="#">钱包</a></li>
                            <li><a href="#">卡包</a></li>
                            <li><a href="#">钥匙包</a></li>
                        </ul>
                    </li>
                    <li>
                        <h2>功能包</h2>
                        <ul>
                            <li><a href="#">行李包</a></li>
                            <li><a href="#">拉杆箱</a></li>
                            <li><a href="#">胸包</a></li>
                            <li><a href="#">电脑包</a></li>
                            <li><a href="#">运动包</a></li>
                            <li><a href="#">腰包</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="right">
                <ul>
                    <li><a href="index.html">首页</a></li>
                    <li><a href="user.html">会员中心</a></li>
                    <li><a href="#">新品汇集</a></li>
                    <li><a href="#">热卖推荐</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
<!--main-->
<div class="main">
    <div class="w12">
        <div class="location">
            <ul>
                <li><img src="img/weizhi.png"></li>
                <li>当前位置 ： </li>
                <li><a href="product-list.html">商品分类</a></li>
                <li>></li>
                <li>女包</li>
            </ul>
        </div>
        <div class="sidebar-pro">
            <div class="sidebar-top">
                <ul>
                    <li><h4>女包</h4></li>
                    <li><a href="#">单肩包</a></li>
                    <li><a href="#">斜跨包</a></li>
                    <li><a href="#">手拿包</a></li>
                    <li><a href="#" class="on">手提包</a></li>
                    <li><a href="#">双肩背包</a></li>
                    <li><a href="#">钱包/卡包</a></li>
                </ul>
            </div>
            <div class="sidebar-bottom">
                <ul>
                    <li><h4>热门商品</h4></li>
                        <a href="#"><img src="img/main_15.png"></a>
                        <h3>&yen;399.00</h3>
                        <h5><a href="#">稻草人新款手提包</a></h5>
                    <a href="#"><img src="img/main_141.png"></a>
                    <h3>&yen;399.00</h3>
                    <h5><a href="#">稻草人新款手提包</a></h5>
                    <a href="#"><img src="img/main_152.png"></a>
                    <h3>&yen;399.00</h3>
                    <h5><a href="#">稻草人新款手提包</a></h5>
                </ul>
            </div>
            <script type="text/javascript">
                $(".sidebar-pro .sidebar-top ul li").eq(6).css("border-bottom","1px solid  #abaaaa")
            </script>
        </div>
        <div class="pro-list">
            <div class="option">
                <ul class="pplist">
                    <li><span>品牌：</span></li>
                    <li><a href="#" class="on">不限</a></li>
                    <li><a href="#">金狐狸</a></li>
                    <li><a href="#">老人头</a></li>
                    <li><a href="#">稻草人</a></li>
                    <li><a href="#">欧时那</a></li>
                    <li><a href="#">她</a></li>
                    <li><a href="#">红古</a></li>
                    <li><a href="#">CHARLES</a></li>
                    <li><a href="javascript:void(0);" class="last" id="first">更多></a></li>
                </ul>
                <ul class="ppListcopy">
                    <li><span>品牌：</span></li>
                    <li><a href="#" class="on">不限</a></li>
                    <li><a href="#">金狐狸</a></li>
                    <li><a href="#">老人头</a></li>
                    <li><a href="#">稻草人</a></li>
                    <li><a href="#">欧时那</a></li>
                    <li><a href="#">她</a></li>
                    <li><a href="#">红古</a></li>
                    <li><a href="#">红古</a></li>
                   	<li><a href="#">红古</a></li>
                    <li><a href="#">红古</a></li>
                    <li><a href="#">红古</a></li>
                   	<li><a href="#">红古</a></li>
                    <li><a href="javascript:void(0);" class="last" id="pack">收起∧</a></li>
                </ul>
            </div>
            <div class="option">
                <ul class="yslist">
                    <li><span>颜色：</span></li>
                    <li><a href="#" class="on">不限</a></li>
                    <li><a href="#">黑<i class="black"></i></a></li>
                    <li><a href="#">白<i class="white"></i></a></li>
                    <li><a href="#">红<i class="red"></i></a></li>
                    <li><a href="#">黄<i class="yellow"></i></a></li>
                    <li><a href="#">绿<i class="green"></i></a></li>
                    <li><a href="#">蓝<i class="blue"></i></a></li>
                    <li><a href="#">灰<i class="gray"></i></a></li>
                    <li><a href="javascript:void(0);" class="last" id="two">更多></a></li>
                </ul>
                <ul class="ysListcopy">
                    <li><span>颜色：</span></li>
                    <li><a href="#" class="on">不限</a></li>
                    <li><a href="#">黑<i class="black"></i></a></li>
                    <li><a href="#">白<i class="white"></i></a></li>
                    <li><a href="#">红<i class="red"></i></a></li>
                    <li><a href="#">黄<i class="yellow"></i></a></li>
                    <li><a href="#">绿<i class="green"></i></a></li>
                    <li><a href="#">蓝<i class="blue"></i></a></li>
                    <li><a href="#">灰<i class="gray"></i></a></li>
                    <li><a href="#">灰<i class="gray"></i></a></li>
                    <li><a href="#">灰<i class="gray"></i></a></li>
                    <li><a href="#">灰<i class="gray"></i></a></li>
                    <li><a href="#">灰<i class="gray"></i></a></li>
                    <li><a href="#">灰<i class="gray"></i></a></li>
                    <li><a href="javascript:void(0);" class="last" id="packTwo">收起∧</a></li>
                </ul>
            </div>
            <div class="option">
                <ul class="czList">
                    <li><span>材质：</span></li>
                    <li><a href="#" class="on">不限</a></li>
                    <li><a href="#">全牛皮 </a></li>
                    <li><a href="#">水洗皮 </a></li>
                    <li><a href="#">人造皮 </a></li>
                    <li><a href="#">鳄鱼皮</a></li>
                    <li><a href="#">虎皮&nbsp; &nbsp;</a></li>
                    <li><a href="#">纤维</a></li>
                    <li><a href="#">布料 &nbsp; </a></li>
                    <li><a href="javascript:void(0);" class="last" id="three">更多></a></li>
                </ul>
                <ul class="czListcopy">
                    <li><span>材质：</span></li>
                    <li><a href="#" class="on">不限</a></li>
                    <li><a href="#">全牛皮 </a></li>
                    <li><a href="#">水洗皮 </a></li>
                    <li><a href="#">人造皮 </a></li>
                    <li><a href="#">鳄鱼皮</a></li>
                    <li><a href="#">虎皮&nbsp; &nbsp;</a></li>
                    <li><a href="#">纤维</a></li>
                    <li><a href="#">布料 &nbsp; </a></li>
                    <li><a href="#">布料 &nbsp; </a></li>
                    <li><a href="#">布料 &nbsp; </a></li>
                    <li><a href="#">布料 &nbsp; </a></li>
                    <li><a href="#">布料 &nbsp; </a></li>
                    <li><a href="#">布料 &nbsp; </a></li>
                    <li><a href="javascript:void(0);" class="last" id="packThree">收起∧</a></li>
                </ul>
            </div>
            <div class="search">
                <ul>
                    <li><span>上市时间</span></li>
                    <li><a href="javascript:void(0);" class="on">综合</a></li>
                    <li><a href="javascript:void(0);">人气↓</a></li>
                    <li><a href="javascript:void(0);">销量↓</a></li>
                    <li>
                        <span class="line">价格</span>
                        <input type="text" value="&yen;" name="price" class="cost">
                        <span class="line">-</span>
                        <input type="text" value="&yen;" name="price" class="costTwo">
                        <button id="ok">确定</button>
                    </li>
                    <li>
                        <input type="search" value="输入关键字" name="search" class="proSearch">
                        <input type="button" name="button" id="proSearch">
                    </li>
                </ul>
            </div>
            <script type="text/javascript">
                $(".pro-list .option").eq(1).css({"border-top":"0","border-bottom":"0"});
            </script>
            <div class="list">
            	<ul>
            		<li>
            			<a href="#"><img src="img/main_15.png"></a>
                        <h3>&yen;399.00</h3>
                        <h5><a href="#">稻草人新款手提包</a></h5>
            		</li>
            		<li>
            			<a href="#"><img src="img/main_16.png"></a>
                        <h3>&yen;399.00</h3>
                        <h5><a href="#">稻草人新款手提包</a></h5>
            		</li>
            		<li>
            			<a href="#"><img src="img/main_18.png"></a>
                        <h3>&yen;399.00</h3>
                        <h5><a href="#">稻草人新款手提包</a></h5>
            		</li>
            		<li>
            			<a href="#"><img src="img/main_24.png"></a>
                        <h3>&yen;399.00</h3>
                        <h5><a href="#">稻草人新款手提包</a></h5>
            		</li>
            		<li>
            			<a href="#"><img src="img/main_26.png"></a>
                        <h3>&yen;399.00</h3>
                        <h5><a href="#">稻草人新款手提包</a></h5>
            		</li>
            		<li>
            			<a href="#"><img src="img/main_28.png"></a>
                        <h3>&yen;399.00</h3>
                        <h5><a href="#">稻草人新款手提包</a></h5>
            		</li>
            		<li>
            			<a href="#"><img src="img/main_31.png"></a>
                        <h3>&yen;399.00</h3>
                        <h5><a href="#">稻草人新款手提包</a></h5>
            		</li>
            		<li>
            			<a href="#"><img src="img/main_38.png"></a>
                        <h3>&yen;399.00</h3>
                        <h5><a href="#">稻草人新款手提包</a></h5>
            		</li>
            		<li>
            			<a href="#"><img src="img/main_41.png"></a>
                        <h3>&yen;399.00</h3>
                        <h5><a href="#">稻草人新款手提包</a></h5>
            		</li>
            		<li>
            			<a href="#"><img src="img/main_52.png"></a>
                        <h3>&yen;399.00</h3>
                        <h5><a href="#">稻草人新款手提包</a></h5>
            		</li>
            		<li>
            			<a href="#"><img src="img/main_55.png"></a>
                        <h3>&yen;399.00</h3>
                        <h5><a href="#">稻草人新款手提包</a></h5>
            		</li>
            		<li>
            			<a href="#"><img src="img/main_58.png"></a>
                        <h3>&yen;399.00</h3>
                        <h5><a href="#">稻草人新款手提包</a></h5>
            		</li>
            		<li>
            			<a href="#"><img src="img/main_65.png"></a>
                        <h3>&yen;399.00</h3>
                        <h5><a href="#">稻草人新款手提包</a></h5>
            		</li>
            		<li>
            			<a href="#"><img src="img/main_68.png"></a>
                        <h3>&yen;399.00</h3>
                        <h5><a href="#">稻草人新款手提包</a></h5>
            		</li>
            		<li>
            			<a href="#"><img src="img/main_71.png"></a>
                        <h3>&yen;399.00</h3>
                        <h5><a href="#">稻草人新款手提包</a></h5>
            		</li>
            		<li>
            			<a href="#"><img src="img/main_81.png"></a>
                        <h3>&yen;399.00</h3>
                        <h5><a href="#">稻草人新款手提包</a></h5>
            		</li>
            	</ul>
            </div>
            <div class="page">
            	<ul>
            		<li class="prev"><a href="javascript:void(0);">上一页</a></li>
            		<li class="on"><a href="#" class="on">1</a></li>
            		<li><a href="#">2</a></li>
            		<li><a href="#">3</a></li>
            		<li><a href="#">···</a></li>
            		<li class="next"><a href="javascript:void(0);">下一页</a></li>
            	</ul>
            </div>
        </div>
         <div class="main-foot">
            <ul>
                <li><img src="img/login-zhuan.png" /><span>100%正品保证</span></li>
                <li><img src="img/login-you.png" /><span>新人首单免邮</span></li>
                <li><img src="img/login-qi.png" /><span>七天包退换</span></li>
                <li><img src="img/login-m.png" /><span>首次退换免邮费</span></li>
            </ul>
        </div>
    </div>
</div>
<!--footer-->

<div class="foot">
    <div class="w12">
        <div class="foot-left">
            <div class="foot-list">
                <h2>消费保障</h2>
                <ul>
                    <li>
                        <a href="#">网购警示</a>
                    </li>
                    <li>
                        <a href="#">隐私保护</a>
                    </li>
                    <li>
                        <a href="#">投诉中心</a>
                    </li>
                    <li>
                        <a href="#">客服中心</a>
                    </li>
                </ul>
            </div>
            <div class="foot-list">
                <h2>购物指南</h2>
                <ul>
                    <li>
                        <a href="reg.html">免费注册</a>
                    </li>
                    <li>
                        <a href="#">购物流程</a>
                    </li>
                    <li>
                        <a href="#">会员介绍</a>
                    </li>
                    <li>
                        <a href="#">常见问题</a>
                    </li>
                </ul>
            </div>
            <div class="foot-list">
                <h2>配送方式</h2>
                <ul>
                    <li>
                        <a href="#">收货上门</a>
                    </li>
                    <li>
                        <a href="#">上门自提</a>
                    </li>
                    <li>
                        <a href="#">配送查阅</a>
                    </li>
                    <li>
                        <a href="#">海外配送</a>
                    </li>
                </ul>
            </div>
            <div class="foot-list">
                <h2>支付方式</h2>
                <ul>
                    <li>
                        <a href="#">在线支付</a>
                    </li>
                    <li>
                        <a href="#">货到付款</a>
                    </li>
                    <li>
                        <a href="#">分期付款</a>
                    </li>
                    <li>
                        <a href="#">公司转账</a>
                    </li>
                </ul>
            </div>
            <div class="foot-list">
                <h2>售后服务</h2>
                <ul>
                    <li>
                        <a href="#">售后政策</a>
                    </li>
                    <li>
                        <a href="#">价格保护</a>
                    </li>
                    <li>
                        <a href="#">取消订单</a>
                    </li>
                    <li>
                        <a href="#">退款流程</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="foot-right">
            <h2>服务热线（8:00-18:00）</h2>
            <ul>
                <li>400-123123</li>
                <li>服务邮箱</li>
                <li>123456789@qq.com</li>
            </ul>
        </div>

    </div>

</div>
<div class="w12">
    <div class="base">
        <ul>
            <li>
                <a href="http://www.alibabagroup.com/cn/global/home">阿里巴巴集团</a>
            </li>
            <li>
                <a href="https://www.taobao.com/">淘宝网</a>
            </li>
            <li>
                <a href="https://www.tmall.com">天猫</a>
            </li>
            <li>
                <a href="http://www.smzdm.com">聚划算</a>
            </li>
            <li>
                <a href="https://www.vip.com/">唯品会</a>
            </li>
            <li>
                <a href="http://www.alibaba.com/">阿里巴巴国际交易市场</a>
            </li>
            <li>
                <a href="https://www.1688.com/">1688</a>
            </li>
            <li>
                <a href="https://www.alimama.com">阿里妈妈</a>
            </li>
            <li>
                <a href="http://trip.taobao.com">去啊</a>
            </li>
            <li>
                <a href="https://wanwang.aliyun.com">万网</a>
            </li>
            <li>
                <a href="https://www.aliyun.com">阿里云计算</a>
            </li>
        </ul>
        <div class="copy">
            <span>&copy;2011-2017   taobao china. 雅倩版权所有   </span>
            <ul>
                <li>
                    <a href="#"> 隐私权政策</a>
                </li>
                <li>
                    <a href="#">  用户服务协议</a>
                </li>
                <li>
                    <a href="#"> 条约规定</a>
                </li>
            </ul>
        </div>
    </div>
</div>
</body>
</html>